<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="myTeam-content w100">
		<up-sticky>
			<view class="dropdown-box w100 flex-row-center">
				<up-dropdown ref="uDropdownRef" active-color="#8BFFF3" inactive-color="#E4E4E5">
					<up-dropdown-item :title="groupTypeInfo.title" v-model="groupTypeInfo.id"
						:options="optionsState.type" @change="changeType"></up-dropdown-item>
					<up-dropdown-item :title="groupStatusInfo.title" v-model="groupStatusInfo.id"
						:options="optionsState.status" @change="changeStatus"></up-dropdown-item>
				</up-dropdown>
			</view>
		</up-sticky>

		<view class="team-main w100">
			<template v-if="itemLoading">
				<view v-for="num in 4" :key="num" style="margin-bottom: 16rpx;">
					<uv-skeletons loading :skeleton="skeleton"></uv-skeletons>
				</view>
			</template>
			<template v-else>
				<template v-if="groupInfo.list.length>0">
					<myTeamItemVue v-for="(item,index) in groupInfo.list" @restList="restList"
						:typeIndex="groupTypeInfo.id" @writeOffOpen="writeOffOpen" :groupInfo="item" :key="item.t_id">
					</myTeamItemVue>
					<view class="view-more" @click="getMoreGroup">
						<up-loadmore :status="groupInfo.status" />
					</view>
				</template>
				<view class="not-list-view" v-else>
					<up-empty mode="data" text="暂无组队数据~">
					</up-empty>
				</view>
			</template>
		</view>
	</view>

	<up-popup :show="writeOffShow" bgColor="#222528" round="18rpx" mode="center" @close="closewriteOff">
		<view class="writeOff-box flex-row-center">
			<view class="code-box flex-center">
				<view class="code-content">
					<up-qrcode :size="200" :val="codeText"></up-qrcode>
				</view>
				<text class="text">核销码：{{codeText}}</text>
			</view>
			<view class="bnt-box flex-center" @click="closewriteOff">
				<text class="btn-text">确定</text>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		userInfoStore
	} from "@/stores/user.js";
	import myTeamItemVue from '../components/myTeamItem.vue';
	import {
		onMounted
	} from "vue";
	const userInfo = userInfoStore();
	const addressInfo = ref(computed(() => userInfo.addressInfo))
	const writeOffShow = ref(false);
	const status = ref('loading');
	const codeText = ref(null);
	const itemLoading = ref(true);
	const writeCode = ref('');
	const tabIndex = ref(0);
	const groupTypeInfo = ref({
		title: '我发布的组队',
		id: 1
	});
	const groupStatusInfo = ref({
		title: '全部',
		id: 0
	})
	const groupInfo = reactive({
		list: [],
		status: 'loadmore',
		pageSize: 1
	})
	let optionStatus = [{
			label: '全部',
			value: 0,
		}, {
			label: '待支付',
			value: 1,
		},
		{
			label: '未开始',
			value: 2,
		},
		{
			label: '进行中',
			value: 3,
		},
		{
			label: '已结束',
			value: 4,
		},
		{
			label: '已取消',
			value: 5,
		},
	]
	let optionInStatus = [{
			label: '全部',
			value: 0,
		}, {
			label: '未开始',
			value: 2,
		},
		{
			label: '进行中',
			value: 3,
		},
		{
			label: '已结束',
			value: 4,
		},
		{
			label: '已取消',
			value: 5,
		},
	]
	const optionsState = reactive({
		type: [{
				label: '我发布的组队',
				value: 1,
			},
			{
				label: '我参与的组队',
				value: 2,
			}
		],
		status: optionStatus,
		inStatus: optionInStatus
	})
	const skeleton = [{
			type: 'flex',
			num: 1,
			style: 'alignItems: center',
			children: [{
				type: 'custom',
				num: 1,
				style: 'width:68rpx;height:68rpx;marginRight: 16rpx;borderRadius:50%;'
			}, {
				type: 'line',
				num: 1,
				style: 'width:100%;',
			}]
		},
		{
			type: 'flex',
			num: 1,
			style: 'marginTop:24rpx;marginBottom:24rpx;display:flex;',
			children: [{
					type: 'custom',
					num: 1,
					style: 'width:160rpx;height:160rpx;borderRadius:16rpx;marginRight: 32rpx;'
				},
				{
					type: 'line',
					num: 3,
					gap: '20rpx'
				},

			]
		}, {
			type: 'line',
			num: 1,
			gap: '20rpx'
		}
	]


	onLoad(() => {
		getGroupList();
	});
	onMounted(() => {
		uni.$on('restmyGroup', (data) => {
			console.log('监听到事件来自 restmyGroup ，携带参数 msg 为：', data.msg);
			if (data.type) {
				restList();
			}
		})
	})
	onReachBottom(() => { //触底刷新
		getMoreGroup();
	})
	onPullDownRefresh(() => { //下拉刷新
		uni.showLoading({
			title: '刷新中'
		});
		restList({
			type: 1
		})
	});
	onUnload(() => {
		uni.$off('restmyGroup');
	})
	const getMoreGroup = () => {
		if (groupInfo.status == 'loading' || groupInfo.status == 'nomore') return;
		groupInfo.status = 'loading';
		setTimeout(() => {
			getGroupList();
		}, 600)
	};
	const getGroupList = async () => { //获取组队列表
		const res = await $Api.group.getGroupList({
			page: groupInfo.pageSize,
			status: groupStatusInfo.value.id,
			type: groupTypeInfo.value.id,
			lng: addressInfo.value?.longitude,
			lat: addressInfo.value?.latitude
		});
		if (res.code == 1) {
			setTimeout(() => {
				itemLoading.value = false;
				uni.stopPullDownRefresh();
				uni.hideLoading();
			}, 600)
			if (res.data.list && res.data.list.length > 0) {
				res.data.list = res.data.list.map(val => {
					let imageList = [];
					if (val.juli) {
						val.juli = parseFloat(val.juli).toFixed(2)
					}
					if (val.image) {
						if (typeof val.image === 'string') {
							imageList = val.image.split(',');
						} else if (Array.isArray(val.image)) {
							val.image.forEach(item => {
								imageList.push(item.url);
							})
						}
					}
					return {
						...val,
						imageList: imageList
					}
				})
				groupInfo.list = [...groupInfo.list, ...res.data.list, ];
			}
			if (res.data.totalPage && res.data.totalPage > groupInfo.pageSize) {
				groupInfo.status = 'loadmore';
				groupInfo.pageSize++;
			} else {
				groupInfo.status = 'nomore';
			}
		} else {
			uni.stopPullDownRefresh();
			uni.hideLoading();
			uni.$u.toast(res.msg)
		}
	}
	const changeTab = (e) => {
		tabIndex.value = e.index;
	}
	const changeSwiper = (e) => {
		tabIndex.value = e.detail.current;
		if (e.detail.current == 2) { //评论
			uni.showLoading({
				title: '加载中'
			});
		}
	}
	const writeOffOpen = (value) => { //打开核销
		writeOffShow.value = true;
		codeText.value = value;
	}
	const closewriteOff = (value) => {
		writeOffShow.value = false;
	}
	const changeType = (e) => { //切换组队类型
		let arr = optionsState.type.filter(val => e == val.value);
		groupTypeInfo.value.title = arr.length > 0 ? arr[0].label : '组队类型';
		if (e == 2) {
			optionsState.status = optionInStatus;
			groupStatusInfo.value.id = 0;
			groupStatusInfo.value.title = '全部'
		} else {
			optionsState.status = optionStatus;
		}
		groupTypeInfo.value.id = e;
		itemLoading.value = true;
		groupInfo.status = 'loadmore';
		groupInfo.list = [];
		groupInfo.pageSize = 1;
		getGroupList();
	}
	const changeStatus = (e) => { //切换组队状态
		let arr = optionsState.status.filter(val => e == val.value);
		groupStatusInfo.value.title = arr.length > 0 ? arr[0].label : '组队状态';
		groupStatusInfo.value.id = e;
		itemLoading.value = true;
		groupInfo.status = 'loadmore';
		groupInfo.list = [];
		groupInfo.pageSize = 1;
		getGroupList();
	};
	const restList = (item) => { //重置列表
		if (item && item.type) { //指定重置

		} else { //全部重置
			groupTypeInfo.value.title = '我发布的组队';
			groupTypeInfo.value.id = 1;
			groupStatusInfo.value.title = '待支付';
			groupStatusInfo.value.id = 1;
		}
		itemLoading.value = true;
		groupInfo.status = 'loadmore';
		groupInfo.list = [];
		groupInfo.pageSize = 1;
		getGroupList();
	}
</script>
<style>
	.u-safe-bottom {
		padding: 0;
	}

	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-between;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}

	/deep/ .u-dropdown-item__scroll {
		background-color: #222528 !important;
	}
</style>
<style lang="scss" scoped>
	.myTeam-content {
		display: flex;
		flex-direction: column;
		padding: 24rpx 0;


	}

	.dropdown-box {
		// padding: 12rpx 0;
		background-color: $page-bg-color;

		.slot-content {
			background-color: #222528;

			.slot-content-left {
				width: 240rpx;
				height: 100%;
				background-color: #212528;
				flex-direction: column;

				.text {
					line-height: 88rpx;
					font-size: 32rpx;
				}

				.slot-item-one {
					.text {
						color: #DBDDDE;
					}
				}

				.slot-item-active {
					.text {
						color: #8BFFF3;
					}
				}
			}

			.slot-content-right {
				flex: 1;
			}
		}
	}

	.team-main {
		padding: 24rpx 20rpx;
		position: relative;
		z-index: 99;
	}

	.writeOff-box {
		padding: 32rpx 0;
		width: 520rpx;
		// min-height: 600rpx;
		border-radius: 18rpx;
		flex-direction: column;

		.code-box {
			flex-direction: column;

			.code-content {
				padding: 18rpx;
				border-radius: 12rpx;
				background-color: #FFFFFF;
			}
		}

		.text {
			font-weight: bold;
			font-size: 38rpx;
			color: #C8C9C9;
			margin-top: 48rpx;
		}

		.bnt-box {
			width: 80%;
			height: 72rpx;
			background: $btn-bg-color;
			border-radius: 36rpx;
			margin-top: 36rpx;

			.btn-text {
				font-size: 28rpx;
				font-weight: bold;
				color: $btn-text-color;
			}
		}

	}
</style>